<template>
  <div class="header_container">
    <!-- <div v-if="route.path != '/home'" @click="handleBack" class="back">
      <img src="./ckxq_03.png" alt />
      <span>返回主页</span>
    </div> -->
    <div class="photo">
      <videoPlay
        x-webkit-airplay="true"
        webkit-playsinline="true"
        x5-video-player-type="h5"
        x5-video-orientation="portraint"
        v-bind="options"
      />
    </div>
    <!-- <div class="foot_img">
      <img src="../../assets\images\header\组 2.png" alt="" />
    </div>-->
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus";
import { reactive, ref } from "vue";
import { getIntro } from "@/apis/subjectInfo";
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
import { useRoute, useRouter } from "vue-router";
const props = defineProps(["url"]);
console.log(props);
const imgUrl = ref();
const id = "f12fb230d2100ab8";
const route = useRoute();
const router = useRouter();
const options = ref({
  // width: "350px", //播放器宽度
  // height: "200px", //播放器高度
  color: "#8055ebef", //主题色
  muted: false, //静音
  webFullScreen: false,
  // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: true, //自动播放
  loop: true, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
  title: "", //视频名称
  src: props.url, //视频源
  poster: "" //封面
});
options.value.src = props.url;
const getIntro1 = async id => {
  let res = await getIntro(id);
  localStorage.setItem("type", res.data[0].type);
  localStorage.setItem("marketId", res.data[0].market);
  localStorage.setItem("pfmarketId", res.data[0].pfmarket);
  options.src = res.data[0].video;
};
// getIntro1(id);
const handleBack = () => {
  router.push({ path: "/home" });
};
</script>

<style lang="scss" scoped>
.header_container {
  width: 100%;
  height: 267px;
  display: flex;
  flex-direction: column;
  position: relative;
  .back {
    height: 30px;
    font-size: 13px;
    display: flex;
    color: #fff;
    align-items: center;
    position: absolute;
    top: -22px;
    left: -15px;
    img {
      width: 24px;
    }
  }
  .photo {
    display: flex;
    justify-content: center;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    border: 2px solid #355fb8;
    box-shadow: 0 0 6px 3px rgba(219, 216, 216, 0.336); /* 设置发光阴影 */
    .d-player-wrap {
      border-radius: 10px;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
